<template>
  <div>
    <el-form label-width="100px" ref="editForm">
      <el-form-item label="">
        <p><span class="el-icon-warning infospan"></span>设置可预约区角班级，将对这些班级开放</p>
      </el-form-item>
      <el-form-item label="可预约班级:">
        <el-button type="primary" @click="chooseClasses" class="mb-10" size="small">选择可预约班级</el-button>
        <div>
          <el-tag
              :key="tag"
              v-for="(tag,index) in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(index)"
              class="mr-10"
          >{{ tag }}
          </el-tag>
        </div>
      </el-form-item>
    </el-form>
    <classMultiple :visible.sync="studentVisible" @studentFn="studentFn"
                   :dynamicTagsArray="dynamicTagsArray"></classMultiple>

  </div>
</template>

<script>
import classMultiple from '@/components/dialog/classMultiple.vue'

export default {
  components: {
    classMultiple
  },
  props:['detailClass'],
  data() {
    return {
      editForm: {
        join_class: ''
      }, // 编辑界面数据
      dynamicTags: [],
      dynamicTagsId: [],
      dynamicTagsArray: {},
      studentVisible: false,
    }
  },
  created() {
  },
  methods: {
    chooseClasses() {
      console.log('选择预约班级')
      this.studentVisible = true
    },
    handleClose(index) {
      this.dynamicTags.splice(index, 1)
      delete this.dynamicTagsArray[this.dynamicTagsId[index]] // 去除选中的人
      this.dynamicTagsId.splice(index, 1)
      this.editForm.join_class = this.dynamicTagsId.join(',')
    },
    studentFn(option) {
      console.log('获取教师信息L:', option)
      this.dynamicTags = []
      this.dynamicTagsId = []
      for (let i in option) {
        this.dynamicTags.push(option[i].class_name) // class_name section_id
        this.dynamicTagsId.push(option[i].id)
        this.dynamicTagsArray = option
      }
      this.editForm.join_class = this.dynamicTagsId.join(',')
    },
    getJson(option){
      return JSON.parse(JSON.stringify(option))
    }
  },
  mounted() {
  },
  watch: {
    detailClass(){
      console.log('detailClass更新了ds')
      this.studentFn(this.detailClass)
    },
    'editForm.join_class': {
      handler(val) {
        console.log('变更了数据', val, this.editForm)
        this.$emit('getModleVal', {data:this.getJson(this.editForm),type:'form'})
      },
      deep: true
    },
  }
}
</script>
<style>
span.infospan{
  color: #ff8600;
  margin-right: 5px;
}
</style>


